<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="cityselect.css" type="text/css"/>
	<style>
		body{margin:0;padding:0;}
		#container{
			width:600px;height:100px;border:1px solid #ccc;
		}
		#citys{margin:0;padding:0;}
	</style>
</head>
<body>
	<div id="container">
		<div id="citys">
			<input type="text"><input type="button" id="edit" value="编辑"/>
			<div id="name_str"></div>
		</div>
	</div>

	<div id="cityshow"></div>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="juicer-min.js"></script>
	<script src="tdist.js"></script>
	<script>
		var areaGroup = {
			"group" : [{
				"title" : "华东",
				"codes" : ["310000", "320000", "330000", "340000", "360000"]
			}, {
				"title" : "华北",
				"codes" : ["110000", "120000", "140000", "370000", "130000", "150000"]
			}, {
				"title" : "华中",
				"codes" : ["430000", "420000", "410000"]
			}, {
				"title" : "华南",
				"codes" : ["440000", "450000", "350000", "460000"]
			}, {
				"title" : "东北",
				"codes" : ["210000", "220000", "230000"]
			}, {
				"title" : "西北",
				"codes" : ["610000", "650000", "620000", "640000", "630000"]
			}, {
				"title" : "西南",
				"codes" : ["500000", "530000", "520000", "540000", "510000"]
			}, {
				"title" : "港澳台",
				"codes" : ["810000", "820000", "710000"]
			}, {
				"title" : "海外",
				"codes" : ["990000"]
			}]
		};
	</script>
	<script id="city_tpl" type="text/template">
		<div class="city_select_wrap">
			<div class="city_select_head clearfix">
				<div class="city_select_title">选择区域</div>
				<div class="city_select_close" id="city_select_close">关闭</div>
			</div>
			<div class="city_select_body clearfix">
				<form id="city_select_form">
					<ul>
						{@each areaGroup.group as group,index}
							<li class="clearfix {@if index%2!=0}city_select_even{@/if}">
								<div class="city_select_unit clearfix">
									<div class="city_select_group_div">
										<input type="checkbox" value="$${group.codes}" id="city_select_group" name="city_select_group">
										<label for="city_select_group" class="group_label">$${group.title}</label>
									</div>
									<div class="city_select_provinces clearfix">
										{@each group.codes as province}
											<div class="city_select_province_div">
												<input type="checkbox" value="$${province}" id="city_select_province" name="city_select_province"/>
												<label for="city_select_province" class="province_label">$${citylist[province][0]}</label><i id="city_select_showcity"></i>
												<div class="city_select_cities">
													
														{@each citylist as city,k}
															{@if city[1]==province}
															<div class="city_select_city_div">
																<input type="checkbox" id="city_select_city" name="city_select_city" value="$${k}"/>
																<label for="city_select_city">$${city[0]}</label>
															</div>
															{@/if}
														{@/each}
														<div class="city_select_city_div city_select_province_close"><input type="button" value="关闭"/></div>

												</div>
											</div>
										{@/each}
									</div>
								</div>
							</li>
						{@/each}

					</ul>
				</form>

			</div>
			<div class="city_select_foot">
				<div class="city_select_buttons">
					<input type="button" value="确定" id="city_select_submit"/>
					<input type="button" value="取消" id="city_select_cancel"/>
				</div>
			</div>
		</div>
	</script>
	<script src="cityselect.js"></script>
	<script>
		$("#edit").click(function(){
			$.cityselect({
				t_name:"name_str"
			});
		});
	</script>
</body>
</html>
